<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <div>
        <el-form :inline="true" :model="form" class="demo-form-inline" size="mini">
          <el-form-item label="订单编号">
            <el-input v-model="form.orderSn " placeholder="订单编号" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status " placeholder="退单状态">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-row type="flex" justify="end">
            <el-col :span="12" :offset="20">
              <el-button size="mini" @click="reset">重置</el-button>
              <el-button type="primary" size="mini" @click="dosearch">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <!-- 退单列表 -->
    <el-table
      v-loading="loading"
      :data="List"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="#"
        width="50"
        align="center"
      />
      <el-table-column
        prop="orderSn"
        label="订单编号"
        width="250"
        align="center"
      />
      <el-table-column label="退单状态" width="150" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="danger" effect="dark">{{ options[scope.row.status].name }}</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="warning" effect="dark">{{ options[scope.row.status].name }}</el-tag>
          <el-tag v-else-if="scope.row.status === 2">{{ options[scope.row.status].name }}</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="info">{{ options[scope.row.status].name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        width="250"
        align="center"
      />
      <el-table-column
        prop="reason"
        label="退单原因"
        width="250"
        align="center"
      />
      <el-table-column
        prop="productName"
        label="商品名称"
        width="150"
        align="center"
      />
      <el-table-column
        label="商品属性"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.productAttr" :key="index">
            <span>{{ item.key }}:</span><span>{{ item.value }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="handleNote"
        label="商家备注"
        width="150"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="添加时间"
        width="250"
        align="center"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="primary" style="width:150px" size="mini" @click="select(scope.row)"> <i class="el-icon-view" style="margin-right:6px" /> 查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { findReturnApply } from '@/api/order/index'
import mixin from '@/mixins/index'
export default {
  mixins: [mixin],
  data() {
    return {
      loading: false,
      List: [],
      form: {
        orderSn: '',
        status: ''
      },
      options: [
        { name: '待处理', id: 0 },
        { name: '退货中', id: 1 },
        { name: '已完成', id: 2 },
        { name: '已拒绝', id: 3 }
      ]
    }
  },
  computed: {
  },
  created() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = this.$options.data().form
    },
    dosearch() {
      this.page.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    getList() {
      this.loading = true
      findReturnApply(this.page.currentPage, this.page.size, { ...this.form }).then(res => {
        res.data.rows.forEach(item => {
          this.List.push({
            ...item,
            productAttr: JSON.parse(item.productAttr)
          })
          this.page.total = res.data.total
        })
      })
      this.loading = false
    },
    select(val) {
      this.$router.push({ name: 'BackDetail', params: { id: val.id }})
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
